<template>
    <div>
        <crumbs></crumbs>
        <h1>查询带头像的所有学生信息</h1>
        <el-table :data="stuData" style="width: 100%;" @row-click="goDetail">
            <el-table-column prop="stu_name" label="姓名"></el-table-column>
            <el-table-column prop="stu_sex"  label="性别"></el-table-column>
            <el-table-column prop="stu_jg"  label="籍贯"></el-table-column>
            <el-table-column prop="stu_date" label="出生日期"></el-table-column>
            <el-table-column prop="stu_hobby" label="爱好"></el-table-column>
            <el-table-column prop="stu_gbf" label="男女朋友"></el-table-column>
            <el-table-column prop="stu_id" label="学号">
            </el-table-column>
            <el-table-column prop="stu_head_img" label="头像">
                <template  slot-scope="scope">
                    <el-image style="width: 100px;height: 100px" :src="scope.row.stu_head_img"  :fit="fit"></el-image>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top:30px">
            <el-pagination background layout="prev, pager, next" :total="number" :pageSize="page" :current-page="currentPageNumber" @current-change="currentChange"></el-pagination>
        </div>
    </div>
</template>

<script>
import {search_info_all} from '@/utils/studentsInfo.js';
    export default {
        data(){
            return{
                stuData:null,
                fit:'cover',
                number:0,//数据的总个数
                page:5,//五条数据一页
                totalData:0,//请求回来的总数据
                currentPageNumber:1//当前页码
            }
        },
        async mounted(){
            let result = await search_info_all({
                method:'get',
                url:'search_info',
                params:{},
                headerType:''
            });
            result.forEach(function(item){
                if(item.stu_date != null){
                    item.stu_date = item.stu_date.slice(0,10);
                }
            })
            console.log(result);
            this.stuData = result;
            this.number = result.length;
            this.totalData = result;
            console.log(this.number);
            this.stuData = this.totalData.slice(
                (this.currentPageNumber - 1) * this.page,this.currentPageNumber * this.page//(当前页码 - 1) * 五条数据一页，当前页码 * 五条数据一页
            );
        },
        methods:{
            currentChange(value){
                console.log(value);
                this.stuData = this.totalData.slice((value - 1) * this.page,value * this.page);
            },
            goDetail(row, column, event){//@row-click:当某一行被点击时会触发该事件
                console.log(row,column,event);//row代表当前点击的那一行的元素 column有一些方法属性 event是事件对象上面有个event.target.tagName
                // console.log(event.target.tagName);
                if (event.target.tagName != "IMG") {
                    this.$router.push({
                        name: "studentsDetail",
                        query: {
                            stuInfoDetail: JSON.stringify(row),
                        },
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
h1{
    font-size: 20px;
}
</style>